<script setup lang="ts">
import dayjs from 'dayjs';
import { ref, computed } from 'vue';
import runData from '@/components/ECharts/runData/index.vue';
import escalateRecords from '@/components/escalateRecords/index.vue';
import LevelMap from '@/components/ECharts/LevelMap/index.vue';
import { MapData } from '@/types/MapData';
import empty from '@/assets/icons/svg/empty-box.svg';
const props = defineProps<{
  mapData: MapData;
  id: string | number;
  someDay: number | string;
}>();

const escalateRecordsRef = ref<InstanceType<typeof escalateRecords>>();

const timePeriod = computed(() => {
  const current = dayjs().format('YYYY-MM-DD');
  const nDay = dayjs()
    .subtract(Number(props.someDay) - 1, 'day')
    .format('YYYY-MM-DD');
  return `${nDay}至${current}`;
});
const currentCapacity = computed(() => {
  const currHolderVol = props.mapData.info.currHolderVol || 0;
  const holderPercentage = props.mapData.data?.data?.holderPercentage || 0;
  if (currHolderVol === 0 || holderPercentage === 0) return 0;
  return currHolderVol * holderPercentage;
});
const totalCapacity = computed(() => props.mapData.info.currHolderVol || 0);
const ReportHandle = async () => {
  escalateRecordsRef.value?.open();
};
</script>

<template>
  <div class="card-box">
    <!-- 门站 -->
    <el-row :gutter="10">
      <el-col :span="16">
        <el-descriptions :column="2" class="largeScreen-descriptions" v-if="mapData.info.type === '1'">
          <el-descriptions-item label="类型">{{ mapData.info?.typeName || '-' }}</el-descriptions-item>
          <el-descriptions-item label="进站压力(MPa)">{{ mapData.data?.data?.inPres || 0 }}</el-descriptions-item>
          <el-descriptions-item label="出站压力(MPa)">{{ mapData.data?.data?.outPres || 0 }}</el-descriptions-item>
          <el-descriptions-item label="进站温度(℃)">{{ mapData.data?.data?.inTemp || 0 }}</el-descriptions-item>
          <el-descriptions-item label="出站温度(℃)">{{ mapData.data?.data?.outTemp || 0 }}</el-descriptions-item>
          <el-descriptions-item label="数据最后上报时间">{{ mapData.data?.data?.readTime || '暂无' }} </el-descriptions-item>
          <el-descriptions-item label="收集频次">{{ mapData.info?.frequency || '-' }}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions :column="2" class="largeScreen-descriptions" v-if="mapData.info.type === '2'">
          <el-descriptions-item label="类型">{{ mapData.info?.typeName || '-' }}</el-descriptions-item>
          <el-descriptions-item label="进站压力(MPa)">{{ mapData.data?.data?.inPres || 0 }}</el-descriptions-item>
          <el-descriptions-item label="出站压力(MPa)">{{ mapData.data?.data?.outPres || 0 }}</el-descriptions-item>
          <el-descriptions-item label="数据最后上报时间">{{ mapData.data?.data?.readTime || '暂无' }} </el-descriptions-item>
          <el-descriptions-item label="收集频次">{{ mapData.info?.frequency || '-' }}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions :column="2" class="largeScreen-descriptions" v-if="mapData.info.type === '5'">
          <el-descriptions-item label="类型">{{ mapData.info?.typeName || '-' }}</el-descriptions-item>
          <el-descriptions-item label="进站压力(MPa)">{{ mapData.data?.data?.inPres || 0 }}</el-descriptions-item>
          <el-descriptions-item label="出站压力(MPa)">{{ mapData.data?.data?.outPres || 0 }}</el-descriptions-item>
          <el-descriptions-item label="数据最后上报时间">{{ mapData.data?.data?.readTime || '暂无' }} </el-descriptions-item>
          <el-descriptions-item label="收集频次">{{ mapData.info?.frequency || '-' }}</el-descriptions-item>
        </el-descriptions>
        <el-row v-if="mapData.info.type === '5'">
          <el-col :span="8">
            <div class="capacity-box">
              <div class="capacity-value">{{ currentCapacity }} <span>m³</span></div>
              <div class="capacity-title">当前容量</div>
            </div>
          </el-col>
          <el-col :span="8">
            <LevelMap :ecahrts-data="mapData.data?.data" v-if="mapData.data"></LevelMap>
            <div class="empty-box" v-else>
              <div class="empty-title">暂无数据</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="capacity-box">
              <div class="capacity-value">{{ totalCapacity }}<span>m³</span></div>
              <div class="capacity-title">总容量</div>
            </div>
          </el-col>
        </el-row>
        <el-descriptions :column="2" class="largeScreen-descriptions" v-if="mapData.info.type === '3'">
          <el-descriptions-item label="类型">{{ mapData.info?.typeName || '-' }}</el-descriptions-item>
          <el-descriptions-item label="压力(kPa)">{{ mapData.data?.data?.outPres || 0 }}</el-descriptions-item>
          <el-descriptions-item label="温度(℃)">{{ mapData.data?.data?.outTemp || 0 }}</el-descriptions-item>
          <el-descriptions-item label="数据最后上报时间">{{ mapData.data?.data?.readTime || '暂无' }} </el-descriptions-item>
          <el-descriptions-item label="收集频次">{{ mapData.info?.frequency || '-' }}</el-descriptions-item>
        </el-descriptions>
      </el-col>
      <el-col :span="8">
        <el-carousel v-if="mapData.info?.imgUrls?.length" height="150px" indicator-position="outside">
          <el-carousel-item v-for="(item, index) in mapData.info.imgUrls" :key="index">
            <el-image
              preview-teleported
              style="width: 100%; height: 100%"
              :src="item"
              :preview-src-list="mapData.info.imgUrls"
              :initial-index="index"
              fit="cover"
            />
          </el-carousel-item>
        </el-carousel>
        <el-empty v-else :image="empty" description="暂无图片" class="largeScreen-empty" style="height: 150px" />
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :span="24">
        <div class="title">
          <el-row :gutter="10">
            <el-col :span="16" class="time-period">
              <span>近{{ someDay }}天运行数据({{ timePeriod }})</span>
            </el-col>
            <el-col :span="8" class="escalate-records">
              <span @click="ReportHandle">上报记录</span>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <div class="chart-box">
          <runData v-if="mapData.data" :echartsData="mapData.data" />
          <el-empty v-else :image="empty" description="暂无数据" class="largeScreen-empty" />
        </div>
      </el-col>
    </el-row>

    <escalateRecords ref="escalateRecordsRef" :info="mapData.info" />
  </div>
</template>

<style scoped lang="scss">
.card-box {
  min-width: 600px;
  min-height: 200px;

  .title {
    background: url('@/assets/largescreen/title-pic.png') no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 61px;
    line-height: 61px;
    padding-left: 20px;

    .time-period {
      color: white;
      font-family: PangMenZhengDao;
      font-size: 18px;
    }

    .escalate-records {
      color: #0be4f1;
      font-family: PangMenZhengDao;
      font-size: 18px;
      text-align: right;
      cursor: pointer;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  .chart-box {
    width: 100%;
    height: 300px;
  }

  .capacity-box {
    width: 100%;
    height: 50px;
    border: 2px dashed #ccc;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .capacity-value {
      font-weight: 700;
      font-size: 16px;
      color: #00ffff;
    }

    .capacity-title {
      font-size: 12px;
      color: #fff;
      opacity: 0.8;
    }
  }

  .empty-box {
    width: 100%;
    height: 50px;
    color: #0be4f1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
</style>
